<template>
  <button @click="resoverFangxiang" style="width:100px;height:30px;margin-bottom: 20px;position: fixed;top: 0;left: 0;">反转</button>
  <div class="taiji-wrapper">
    <!-- 先天八卦 -->
    <div class="fangxiang">
      <!-- 乾 -->
      <div class="fx-item qian" data-ch="乾">
        <div class="fx-flex-col">
          <div class="fx-name">乾</div>
          <div class="fx-changxian"></div>
          <div class="fx-changxian"></div>
          <div class="fx-changxian"></div>
        </div>
      </div>
      <!-- 巽 -->
      <div class="fx-item xun" data-ch="巽">
        <div class="fx-flex-col">
          <div class="fx-name">巽</div>
          <div class="fx-changxian"></div>
          <div class="fx-changxian"></div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
        </div>
      </div>
      <!-- 坎 -->
      <div class="fx-item kan" data-ch="坎">
        <div class="fx-flex-col">
          <div class="fx-name">坎</div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
          <div class="fx-changxian"></div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
        </div>
      </div>
      <!-- 艮 -->
      <div class="fx-item gen" data-ch="艮">
        <div class="fx-flex-col">
          <div class="fx-name">艮</div>
          <div class="fx-changxian"></div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
        </div>
      </div>
      <!-- 坤 -->
      <div class="fx-item kun" data-ch="坤">
        <div class="fx-flex-col">
          <div class="fx-name">坤</div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
        </div>
      </div>
      <!-- 震 -->
      <div class="fx-item zhen" data-ch="震">
        <div class="fx-flex-col">
          <div class="fx-name">震</div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
          <div class="fx-changxian"></div>
        </div>
      </div>
      <!-- 離 -->
      <div class="fx-item li" data-ch="離">
        <div class="fx-flex-col">
          <div class="fx-name">離</div>
          <div class="fx-changxian"></div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
          <div class="fx-changxian"></div>
        </div>
      </div>
      <!-- 兑 -->
      <div class="fx-item dui" data-ch="兑">
        <div class="fx-flex-col">
          <div class="fx-name">兑</div>
          <div class="fx-duanxian-wrapper">
            <div class="fx-duanxian"></div>
            <div class="fx-duanxian"></div>
          </div>
          <div class="fx-changxian"></div>
          <div class="fx-changxian"></div>
        </div>
      </div>
    </div>
    <!-- 太极图 -->
    <div class="taiji-circle">
      <div class="white"></div>
      <div class="black"></div>
      <div class="white-circle-mask flex-center">
        <div class="sm-circle-black"></div>
      </div>
      <div class="black-circle-mask flex-center">
        <div class="sm-circle-white"></div>
      </div>
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import { onMounted } from "vue";
import { hasClass, removeClass, addClass } from "@/utils";
onMounted(() => {
  circleLayout();
});

const resoverFangxiang = () => {
  const doms: Element[] = Array.from(
    document.getElementsByClassName("fx-flex-col")
  );
  doms.forEach((item) => {
    if (hasClass(item, "fx-flex-col-0deg")) {
      removeClass(item as HTMLElement, "fx-flex-col-0deg");
    } else {
      addClass(item as HTMLElement, "fx-flex-col-0deg");
    }
  });
};

// 圆形布局
const circleLayout = () => {
  const oFangxiangDom = document.getElementsByClassName("fangxiang")[0],
    oFangxiangDomChildren = Array.from(oFangxiangDom.childNodes);
  oFangxiangDomChildren
    .map((fxItem) => {
      if (fxItem.nodeType == 1) {
        return fxItem as HTMLElement;
      }
    })
    .forEach((fxItem, index, curArr) => {
      let fxItemAs = fxItem as Element,
        len = curArr.length;
      fxItemAs &&
        fxItemAs.setAttribute(
          "style",
          `
        transform:rotate(${(360 / len) * index - 20}deg);
        `
        );
    });
};
</script>
  
<style scoped>
@keyframes rotateTJ {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.taiji-wrapper {
  margin: 0 auto;
  margin-top: 50px;
  width: 550px;
  height: 550px;
  position: relative;
  animation: rotateTJ 20s linear infinite;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 太极图 */
.taiji-circle {
  position: absolute;
  left: 275px;
  top: 275px;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  z-index: 1000;
}

.black {
  width: 100px;
  height: 200px;
  background-color: #000000;
}

.white {
  width: 100px;
  height: 200px;
  background-color: #ffffff;
}

.white-circle-mask {
  width: 99px;
  height: 99px;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50px;
  z-index: 10;
  border-radius: 50%;
}
.black-circle-mask {
  width: 99px;
  height: 99px;
  background-color: #000000;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
  z-index: 10;
  border-radius: 50%;
}

.sm-circle-black {
  width: 30px;
  height: 30px;
  background-color: #000000;
  border-radius: 50%;
}

.sm-circle-white {
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 50%;
}

/* 八卦方向位 */
.fx-flex-col {
  min-width: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  transition: all 2s;
  transform: rotate(180deg);
}

.fx-flex-col-0deg {
  transform: rotate(0deg) !important;
}
.fx-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.fx-duanxian-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fx-changxian {
  width: 80px;
  height: 10px;
  background-color: #000000;
  margin-bottom: 10px;
}
.fx-duanxian {
  width: 35px;
  height: 10px;
  background-color: #000000;
}
.fangxiang {
  position: absolute;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
}

.fx-item {
  height: 100%;
  position: absolute;
  top: -10px;
  left: calc(300px - 75px);
  transform-origin: 50% 50%;
  transform: rotate(90deg);
  padding-top: 40px;
  box-sizing: border-box;
}

.fangxiang > div {
  margin: 10px;
}
</style>